<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>欢迎注册</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/login.css">
  <link rel="stylesheet" type="text/css" href="css/reset.css"/>
</head>
<body>

<div id="particles-js">
		<div class="login">
			<div class="regs-top">
				注册
			</div>
			<div class="tips">

			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/name.png"/></div>
				<div class="login-center-input">
					<input type="text" id="username" placeholder="请输入您的用户名" maxlength="20" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
					<div class="login-center-input-text">请输入您的用户名</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/key.png"/></div>
				<div class="login-center-input">
					<input id="apassword" type="password" placeholder="请输入您的密码" maxlength="20" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
					<div class="login-center-input-text">请输入您的密码</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/key.png"/></div>
				<div class="login-center-input">
					<input id="bpassword" type="password" placeholder="重新确认您的密码" maxlength="20" onfocus="this.placeholder=''" onblur="this.placeholder='重新确认您的密码'"/>
					<div class="login-center-input-text">重新确认您的密码</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/phone.png"/></div>
				<div class="login-center-input">
					<input type="tel" id="phone" placeholder="请输入你的手机号" onfocus="this.placeholder=''" onblur="this.placeholder='请输入你的手机号'" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" />
					<div class="login-center-input-text">请输入你的手机号</div>
				</div>
			</div>

			<div class="register-button">
				注册
			</div>
		</div>
		<div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<!-- javascript -->

<script src="js/jquery.fancybox.min.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">

	function hasClass(elem, cls) {
	  cls = cls || '';
	  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
	  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
	}
	 
	function addClass(ele, cls) {
	  if (!hasClass(ele, cls)) {
	    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
	  }
	}
	 
	function removeClass(ele, cls) {
	  if (hasClass(ele, cls)) {
	    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
	    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
	      newClass = newClass.replace(' ' + cls + ' ', ' ');
	    }
	    ele.className = newClass.replace(/^\s+|\s+$/g, '');
	  }
	}

	$("#username").change(function (){
		let username = $("#username").val();
		if (username.length<=0){
			$(".tips").empty();
			$(".tips").append(`<p>请输入用户名!</p>`);
			return ;
		}
		let url = `/ruoyi/register/ssousername`;
		let param = {"username":username};
		$.ajax({
			url:url,
			data:param,
			dataType:"json",
			success(result){
				if (result.status===200){
					$(".tips").empty();
					$(".tips").append(`<p style="color: green">该名称可以使用,提交后无法修改</p>`);
				}else {
					$(".tips").empty();
					$(".tips").append(`<p>该名称已重复</p>`);
				}
			},
			error(){
				$(".tips").empty();
				$(".tips").append(`<p>系统维护中!</p>`);
			}
		});
	});

	$("#apassword").change(function (){
		doCheckPassword();
	});

	$("#bpassword").change(function (){
		doCheckPassword();
	});

	function doCheckPassword(){
		let apassword = $("#apassword").val();
		let bpassword = $("#bpassword").val();
		if (apassword.length>16||apassword.length<8||bpassword.length>16||bpassword.length<8){
			$(".tips").children(".pwdsso").remove();
			$(".tips").append(`<p class="pwdsso">密码长度不匹配!</p>`);
			return ;
		}
		if (apassword!==bpassword){
			$(".tips").children(".pwdsso").remove();
			$(".tips").append(`<p class="pwdsso">密码不匹配！</p>`);
			return ;
		}else{
			$(".tips").children(".pwdsso").remove();
		}
	}

	$("#phone").change(function (){
		let phone = $("#phone").val();
		let phonet = /1[35789]\d{9}$/;
		if (!phonet.test(phone)) {
			$(".tips").children(".phonesso").remove();
			$(".tips").append(`<p class="phonesso">请填写正确的手机号!</p>`);
		}else {
			$(".tips").children(".phonesso").remove();
		}

	});

	document.querySelector(".register-button").onclick = function(){
		let username = $("#username").val();
		let apassword = $("#apassword").val();
		let bpassword = $("#bpassword").val();
		let phone = $("#phone").val();
		if (username.length<=0||apassword.length<=0||bpassword.length<=0||phone.length<=0){
			$(".tips").empty();
			$(".tips").append(`<p>请填写所有信息！</p>`);
			return ;
		}
		let url = `/ruoyi/register`;
		let params = {"username":username,"password":bpassword,"phone":phone};
		addClass(document.querySelector(".login"), "active");
		setTimeout(function(){
			addClass(document.querySelector(".sk-rotating-plane"), "active");
			document.querySelector(".login").style.display = "none";
		},800);
		setTimeout(function(){
			removeClass(document.querySelector(".login"), "active");
			removeClass(document.querySelector(".sk-rotating-plane"), "active");
			document.querySelector(".login").style.display = "block";
			$.ajax({
				url:url,
				data: params,
				dataType: "json",
				success(result){
					if(result.status===200){
						$(".tips").empty();
						location.href="/index2.html";
					}else{
						$(".tips").empty();
						$(".tips").append(`<p>${result.msg}</p>`);
					}
				},
				error(){
					$(".tips").empty();
					$(".tips").append(`<p>系统维护中..</p>`);
				}
			});
		},2000);
	}
</script>

</body>
</html>